<template>
  <div class="sign">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登录</span>
      </div>
      <el-form :model="form" :rules="rules" status-icon ref="form" label-width="100px" class="demo-form">
        <el-form-item 
          label="账号" 
          prop="account">
          <el-input type="text" v-model="form.account"
          @keypress.native.enter="submitForm('form')"></el-input>
        </el-form-item>
        <el-form-item 
          label="密码" 
          prop="password">
          <el-input type="password" v-model="form.password"
          @keypress.native.enter="submitForm('form')"></el-input>
        </el-form-item>
        <el-form-item
          label="验证码" 
          prop="code">
          <el-input  type="text" v-model="form.code" style="width:150px"
          @keypress.native.enter="submitForm('form')"/>
          <div class="login-code" @click="refreshCode">
          <!--验证码组件-->
          <Sidentify :identifyCode="identifyCode" />
          </div>
        </el-form-item>
      </el-form>
      <div>
        <el-button 
          class="button" 
          type="primary" 
          @click="submitForm('form')">登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import Sidentify from "@/components/sidentify"
export default {
  components:{Sidentify},
  data() {
    let codeForm=(rule,value,callback)=>{
      if(String(value)==this.identifyCode){
        callback()
        }else{
        callback(new Error('验证码不正确'))
      }
    };
    return{
      form:{
        account:'',
        password:'',
        code:''
      },
      identifyCodes: "1234567890",
      identifyCode: "",
      rules:{
          account:[
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
          code:[
              { required: true, message: '请输入验证码', trigger: 'blur' },
              {validator:codeForm,trigger:'blur'},
          ],
      }
    }
  },
  mounted(){
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
  },
  created(){
    var x = new Date()
    console.log(x.getFullYear());
    console.log(x.getMilliseconds());
    this.refreshCode()
    // 调用api接口，并且提供了两个参数                
             
  },
  methods:{
    //提交
    submitForm(formName) {
      const request = {
        account:this.form.account,
        password:this.form.password
      }
      this.$refs[formName].validate((valid)=>{
        if (valid) {
          this.$apis.
            login(request).then(res => {
              this.$router.push("layout")
            }) 
        } else {
          this.refreshCode()
          return false;
        }
      }
      );
    },
     //验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },       
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    }
  }
}
</script>

<style scoped>
.sign{
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: url('../../assets/images/背景.jpg') no-repeat;
  background-size: cover;
}
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 480px;
    margin: 15% auto;
  }
  .login-code{
    display: inline-block;
    line-height: 100%;
  }
  .button{
    width: 100%;
  }
</style>